<template>
  <div class="preview-box">
    <div class="preview-handle">
      <el-button @click="addPrePageNew" class="add-module btn">+</el-button>
      <el-button @click="handle('upward')" class="btn">上移</el-button>
      <el-button @click="handle('downward')" class="btn">下移</el-button>
      <el-button @click="handle('remove')" class="btn">删除</el-button>
      <el-button @click="previewPage" class="btn">预览</el-button>
      <el-button @click="addPageNew" class="add-module btn">+</el-button>
    </div>
    <div class="preview-scroll">
      <!--
        <v-page  :ref="index" 
              v-for="(index,item) in pageArr"
              :isEditPreview="true"
              v-on:vClick="vClick">
        </v-page>
      -->
       <div v-for="(item,index) in pageArr" :key="index" >
         <div @click="getRef(index)">
            <v-page  
                  :style="item.Pageinfo.style"
                  :ref="index" 
                  :class="pageCurrent==index?'choose-module':' '"
                  :isEditPreview="true"
                  @vClick="vClick"  
                  :modulesItem="item">
            </v-page>
         </div>
       </div>
    </div>
  </div>
</template>

<script>
  import Event from '@/tools/_vue'
  import htmlTemplate from '@/core/html.js'
  import getConfig from '@/core/packages/index.config'
  export default {
    name: "preview",
    watch: {
      
      'pageArr.V_DATA.modules': {
        handler(newName) {
         Event.$emit('on_D_DATA', newName)
        },
        immediate: true
      }
    },
    data() {
      return {
        D_DATA: {},
        pageArr: [],
        componentName: '',
        pageCurrent: '' 
      }
    },
    mounted() {
      this.addPageNew()
    },
    methods: {
      //获取动态的ref值  目前有一个问题点击+会触发click事件
      getRef(index){
       // console.log("index"+index)
       //console.log(index)
        this.pageCurrent = index

      },
      previewPage(){
        let hm = htmlTemplate(this.pageArr) //this.$refs.vPage.V_DATA
        let blob = new Blob([hm], {
          'type': 'text/html'
        })
        this.url = URL.createObjectURL(blob)
        window.open(this.url)
      },
      addModule(opt) {
        
        //获取pageuuid 
        //把数据push到modules
        let moduleIndex = this.pageCurrent
        let uuid = this.pageArr[moduleIndex].Pageinfo.uuid;
        
        let item = this.pageArr.find(val =>{
          //console.log(val)
            return val.Pageinfo.uuid == uuid?val: ''
        })
         console.log("dhaihdi")
        console.log(item)
        //let {modules = [] } = {} //(this.pageArr[moduleIndex].V_DATA || {})
        item.V_DATA.modules.push(opt)
        
      },
      //pageArr[{pageinfo{v-data.modules}}]
      addPageNew(){
        let backPageCurrent = 0
        if(this.pageCurrent!==''){
          backPageCurrent = parseInt(this.pageCurrent) + 1
        }
          this.D_DATA = {Pageinfo:{},V_DATA:{ modules: []}},
          this.D_DATA.Pageinfo = getConfig('v-page')
         if(backPageCurrent>0&&backPageCurrent<this.pageArr.length-1){
           let newPageArr = this.pageArr.splice(backPageCurrent)
           newPageArr.unshift(this.D_DATA)
           this.pageArr = this.pageArr.concat(newPageArr)
         }else{
           this.pageArr.push( this.D_DATA)
         }
          this.pageCurrent = backPageCurrent
          Event.$emit('on_D_DATA', this.pageArr[this.pageCurrent].Pageinfo)
      },
      addPrePageNew(){
        let prePageCurrent =0
        if(this.pageCurrent>0){
           prePageCurrent = this.pageCurrent
        }
          this.D_DATA = {Pageinfo:{},V_DATA:{ modules: []}},
          this.D_DATA.Pageinfo = getConfig('v-page')
        if(this.pageCurrent==''){
          this.pageArr.push( this.D_DATA);
        }else if(this.pageCurrent==0){
          this.pageArr.unshift( this.D_DATA);
        }else{
          let newPageArr = this.pageArr.splice(prePageCurrent)
          newPageArr.unshift(this.D_DATA)
          this.pageArr = this.pageArr.concat(newPageArr)
        }
          this.pageCurrent = prePageCurrent
          Event.$emit('on_D_DATA', this.pageArr[this.pageCurrent].Pageinfo)
      },
      vClick(options) {
        this.D_DATA = options
        this.$emit('vClick', options)
      },
      handle(type) {
        const {vPage} = this.newref //this.newref this.$refs
       // console.log(this.newref)
        if (!this.D_DATA) {
          return this.$message({
            message: '没有选中的模块(0)',
            type: 'warning'
          })
        }
        let {modules} = this.pageArr[vPage].V_DATA
        let i = modules.findIndex((item) => {
          return item.uuid === this.D_DATA.uuid
        })

        if (i > -1) {
          // 移除
          if (type === 'remove') {
            modules.splice(i, 1)
            // 删除后，后面的元素顶上
            if (i <= modules.length - 1) {
              vPage.current = i
              this.D_DATA = modules[i]
            } else if (i > (modules.length - 1) && modules.length) {
              vPage.current = i - 1
              this.D_DATA = modules[i - 1]
            } else {
              vPage.current = null
              this.D_DATA = null
            }
          }

          // 上移
          if (type === 'upward') {
            if (i !== 0) {
              const upAim = modules.splice(i, 1)[0]
              modules.splice(i - 1, 0, upAim)
              vPage.current = i - 1
            } else {
              this.$message({
                message: '第一个元素不可以上移',
                type: 'warning'
              })
            }
          }

          // 下移
          if (type === 'downward') {
            if (i !== modules.length - 1) {
              const downAim = modules.splice(i, 1)[0]
              modules.splice(i + 1, 0, downAim)
              vPage.current = i + 1
            } else {
              this.$message({
                message: '最后一个元素不可以下移',
                type: 'warning'
              })
            }
          }

        } else {
          this.$message({
            message: '没有找到该模块(0)',
            type: 'warning'
          })
        }
      }
    }
  }
</script>

<style scoped>
  .preview-box {
    position: relative;
    margin: 30px auto;
    width: 320px;
    height: 520px;
    background-color: #fff;
    border-top: 30px solid black;
    border-bottom: 50px solid black;
    border-radius: 30px;
    /* 让fixed相对它定位 */
    transform: scale(1, 1);
    
  }

  .preview-box:before {
    content: '';
    position: absolute;
    top: -18px;
    left: 150px;
    width: 20px;
    height: 3px;
    border-radius: 2px;
    background-color: #fff;
  }

  .preview-box:after {
    content: '';
    position: absolute;
    bottom: -44px;
    left: 142px;
    width: 36px;
    height: 36px;
    background-color: #f1f1f1;
    border-radius: 100%;
  }

  .preview-scroll {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .preview-handle {
    position: absolute;
    height:auto;
    left: -76px;
   
  }

  .add-module{

  }
  .choose-module {
    border:1px solid #409eff;
  }
  .btn{
    display: block;
    margin:5px;
    width:69px;
  }
</style>
